<template>
	<view>
		<view class="head-body">
			<uni-section title="异常图片管理" type="line" titleFontSize="20px">
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="8" v-if="nvueWidth>1100">
						<view class="gd-text">MO号:</view>
					</uni-col>
					<uni-col :span="11" v-if="nvueWidth>1100">
						<uni-easyinput  focus trim="all" v-model="MO" @change="onChange" placeholder=""></uni-easyinput>
					</uni-col>
					<uni-col :span="7" v-if="nvueWidth<1100">
						<view class="gd-text">MO号:</view>
					</uni-col>
					<uni-col :span="12" v-if="nvueWidth<1100">
						<uni-easyinput  focus trim="all" v-model="MO" @change="onChange" placeholder=""></uni-easyinput>
					</uni-col>
					<uni-col :span="5">
						<yt-scanCode btnName="扫码" style="margin-left: 8%;margin-top: 3px;"
							@getScanCode="OnScanningCode"></yt-scanCode>
					</uni-col>
					
				</uni-row>
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="8">
						<view class="gd-text">当前工序号:</view>
					</uni-col>
					<uni-col :span="16">
						<view class="gl-text">{{jobCode}}</view>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="8">
						<view class="gd-text">当前工序名称:</view>
					</uni-col>
					<uni-col :span="16">
						<view class="gl-text">{{jobName}}</view>
					</uni-col>
				</uni-row>
			</uni-section>
			<view style="border-top: 1px solid #cecece; margin-top: 30px;">
			</view>
			<uni-section title="异常列表" type="line" titleFontSize="20px">
				<uni-card>
					<view style="height:61vh" v-if="nvueWidth>1100">
						<zb-table :columns="column" :stripe="true" :border="true" :data="data" :cell-style="cellStyle"
							@rowClick="rowClick"></zb-table>
					</view>  
					<view style="height:53vh" v-if="nvueWidth<1100">
						<zb-table :columns="column1" :stripe="true" :border="true" :data="data" :cell-style="cellStyle"
							@rowClick="rowClick"></zb-table>
					</view>  
				</uni-card>
			</uni-section>
		</view>
		<sl-pda-employ :config="pdaConfig"></sl-pda-employ>
	</view>
</template>

<script>
	import {
		findDetailByJobMo,
		abnormalListByJobCode
	} from '@/api/system/inpect-other'
	import slPdaEmploy, {
		initPdaScan,
		manualTrigScan,
		onUnloadPdaScan,
		BroadcastConfig
	} from '../../uni_modules/sl-pdaEmploy'
	export default {
		data() {
			return {
				pdaConfig: { // 可以抽离出去管理这个配置
					BroadcastAction: 'nantong',
					BroadcastLabelKey: 'data',
					//BroadcastTriglKey: 'com.scan.onStartScan',
				},
				nvueWidth: uni.getWindowInfo().screenWidth,
				MO: "",
				jobCode: "",
				jobName: "",
				data: [],
				column: [{
						label: '序号',
						type: 'index',
						align: "center",
						width: uni.getWindowInfo().screenWidth / 10 * 0.8
					},
					{
						name: 'stutStateCode',
						label: '状态',
					
						align: "center",
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
					{
						name: 'procCode',
						label: '工序',
					
						align: "center",
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
					{
						name: 'chitName',
						label: '泡泡号',
						
						align: "center",
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
					{
						name: 'inspectionValue',
						label: '实测描述',
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
					{
						name: 'commitUser',
						label: '提交人',
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
					{
						name: 'commitDate',
						label: '提交时间',
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
					{
						name: 'submitUser',
						label: '当前处理人',
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
					{
						name: 'submitStateName',
						label: '当前处理节点',
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
					{
						name: 'fileCount',
						label: '附件',
						align: "center",
						width: uni.getWindowInfo().screenWidth / 10 * 1
					},
				],
				column1: [{
						label: '序号',
						type: 'index',
						align: "center",
						width: 30
					},
					{
						name: 'fileCount',
						label: '附件',
						align: "center",
						width: 50
					},
					{
						name: 'stutStateCode',
						label: '状态',
						align: "center",
						width: 50
					},
					{
						name: 'procCode',
						label: '工序',
						align: "center",
						width: 50
					},
					{
						name: 'chitName',
						label: '泡泡号',
						align: "center",
						width: 50
					},
					{
						name: 'inspectionValue',
						label: '实测描述',
						width: 55
					},
					{
						name: 'submitUser',
						label: '当前处理人',
						width: 65
					},
					{
						name: 'submitStateName',
						label: '当前处理节点',
						width: 80
					},
					{
						name: 'commitUser',
						label: '提交人',
						width: 50
					},
					{
						name: 'commitDate',
						label: '提交时间',
						width: 80
					},
					
					
				],
			}
		},
		components: {
			slPdaEmploy
		},
		onShow() {
			if (this.MO !== "") {
				this.findJobMo();
			}	
		},
		onLoad() {
			initPdaScan(code => {
				this.clear();
				this.MO = code;
				this.findJobMo();
			})
		},
		onUnload() {
			onUnloadPdaScan()
		},
		methods: {
			onChange(code) {
				this.clear();
				this.MO = code;
				this.findJobMo();
			},
			OnScanningCode(code) {
				this.clear();
				this.MO = code;
				this.findJobMo();
			},
			findJobMo(){
				console.log(this.MO)
				findDetailByJobMo(this.MO).then(res => {
					console.log(res.data)
					this.jobCode = res.data.procCode
					this.jobName = res.data.jobName
				})
				abnormalListByJobCode(this.MO).then(res => {
					console.log(res.data)
					let data = res.data;
					for (var i = 0; i < data.length; i++) {
						data[i].jobCode=this.jobCode;
						if(data[i].stutStateCode==="QA.t_qa_checktask.chta_status.000"){
							data[i].stutStateCode="未检验";
						}else if(data[i].stutStateCode==="QA.t_qa_checktask.chta_status.003"){
							data[i].stutStateCode="已发送";
						}else if(data[i].stutStateCode==="QA.t_qa_checktask.chta_status.004"){
							data[i].stutStateCode="关闭";
						}
						
					}
					this.data = data;
				})
			},
			change(e) {
				if (this.MO !== "") {
					this.findJobMo();
				}
			},
			clear() {
				this.MO = "";
				this.jobCode ="",
				this.jobName ="",
				this.data = [];
			},
			rowClick(row, index) {
				console.log(row, index)
				uni.navigateTo({
					url: '/pages/inspect-other/picture?data=' + JSON.stringify(row),
				})
			},
            cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 9 && this.nvueWidth>1100) {
					return {
						color: '#0000fff2'
					}
				}else if (columnIndex === 1 && this.nvueWidth<1100){
					return {
						color: '#0000fff2'
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.head-top {
		height: 10vh;
	}

	.head-top-row {
		background-color: #007AFF;
		display: flex;
		height: 6vh;
	}

	.head-top-row-left {
		padding-top: 0.5vh;
		font-size: 19px;
		font-weight: 500;
		width: 86%;
	}

	.head-top-row-left-text {
		padding-left: 30%;
		color: #ffffff;
	}

	.head-top-row-right {
		color: #ffffff;
		margin-left: 2%;
		width: 14%;
		font-size: 17px;
		font-weight: 500;
		padding-top: 1vh;
	}

	.head-body {
		background-color: #ffffff;
		height: 90vh;
	}

	.demo-uni-row {
		padding-left: 10px;
		margin-top: 6px;
	}

	.gd-text {
		font-size: 17px;
		margin-top: 4px;
		float: right;
		margin-right: 6px;
	}
	.gl-text {
		font-size: 17px;
		margin-top: 4px;
		float: left;
	}
	::v-deep {
		.uni-card {
			margin: 1% !important;
			padding: 0 !important;

			.uni-card__content {
				padding: 0 !important;
			}
		}
	}

	.getScanCode {
		margin-right: 4px;
		margin-top: 10px;
	}

	::v-deep .is-disabled {
		color: black !important;
	}

	.triangle-facing-left {
		display: inline-block;
		border-left: 1px solid;
		border-bottom: 1px solid;
		width: 12px;
		height: 12px;
		transform: rotate(45deg);
	}
</style>